﻿// Define the Angular App
var myApp = angular.module("myApp", ["ui.bootstrap"]);

// Controller - Home
myApp.controller("HomeController", function ($scope, $modal) {
    $scope.greeting = "hello: ";

    // array to contain all our data
    $scope.myContacts = []; // Model

    // hold current index (edit & delete)
    $scope.myIndex = 0;
    // is the user Editing,
    $scope.editMode = false;

    // CREATE - user clicks ADD
    $scope.getUserDetails = function() {
        var objToAdd = {
            name: $scope.userName,
            city: $scope.userCity,
            rate: $scope.rate
        };
        $scope.userCount += 25;
        $scope.myContacts.push(objToAdd);
        console.log($scope.userName, $scope.userCity, $scope.myContacts);
        clearFields()
    }

    // UPDATE - User clicked edit, populate the fields
    $scope.doEditUser = function (idIndex) {
        $scope.myIndex = idIndex; // capture the current index
        $scope.editMode = true; // set the editmode to true
        console.log("try to edit: ", idIndex, $scope.myContacts[idIndex]);
        //populate the fields...
        $scope.userName     = $scope.myContacts[idIndex].name; 
        $scope.userCity     = $scope.myContacts[idIndex].city;
        $scope.rate         = $scope.myContacts[idIndex].rate;
    }
    // wait for user to edits the fields, then save changes (also add cancel)
    $scope.saveUserDetails = function () {
        // build object from new edits
        var objToAdd = {
            name: $scope.userName,
            city: $scope.userCity,
            rate: $scope.rate
        };
        // save obj to correct array index
        $scope.myContacts[$scope.myIndex] = objToAdd;
        $scope.editMode = false; // set the editmode back false
        clearFields(); // clear the input fields
    }
    // clear the input fields...
    function clearFields() {
        $scope.userName = "";
        $scope.userCity = "";
        $scope.rate = 5;
    }
    //Delete
    $scope.doDelete = function (id) {
$scope.myContacts.splice(id,1)
    }

    //// BOOTSTRAP UI.....

    //////// Progress Bar
    $scope.userCount = 0;


    //////// RATING /////////
    $scope.rate = 7;
    $scope.max = 10;
    $scope.isReadonly = false;

    $scope.hoveringOver = function (value) {
        $scope.overStar = value;
        $scope.percent = 100 * (value / $scope.max);
    };

    $scope.ratingStates = [
      { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
      { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
      { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
      { stateOn: 'glyphicon-heart' },
      { stateOff: 'glyphicon-off' }
    ];
    /////
    ////// MODAL... /////

    $scope.items = ['item1', 'item2', 'item3'];

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            //$log.info('Modal dismissed at: ' + new Date());
            console.log('Modal dismissed at: ' + new Date());
        });
    };





});


// Controller for the MODAL - "ModalInstanceCtrl"
myApp.controller("ModalInstanceCtrl", function ($scope, $modalInstance) {
    $scope.greeting = "Hola angular mundo!";
    $scope.items = ['item1', 'item2', 'item3'];
    $scope.selected = {
        item: $scope.items[0]
    };

    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

// Controller - Home Test
myApp.controller("HomeTestController", function ($scope) {
    $scope.greeting = "Hola angular mundo!";

});
